<template>
  <j-modal
    :title="title"
    :width="600"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    @close="close"
    cancelText="关闭"
  >
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" :model="model">
        <a-form-model-item label="状态" prop="status">
          <j-dict-select-tag style='width: 100%' v-model="model.status"
                             type="radioButton"
                             placeholder="请选择"
                             dict-code="sjzgzt"
                             :disabled="disableSubmit"/>
        </a-form-model-item>
        <a-form-model-item label="整改时间" prop="zgdate">
          <j-date style='width:100%' v-model='model.zgdate' :disabled="disableSubmit"></j-date>
        </a-form-model-item>
        <a-form-model-item label="整改备注" prop="zgcmit">
          <a-textarea
            v-model="model.zgcmit"
            :auto-size="{ minRows: 3, maxRows: 3 }"
            :disabled="disableSubmit"
          />
        </a-form-model-item>
        <a-form-model-item label="金额类问题整改类型" prop="amountType">
          <a-tree-select
            :show-search="true"
            tree-node-filter-prop="title"
            v-model="model.amountType"
            style="width: 100%"
            :tree-data="treeData1"
            tree-checkable
            :maxTagCount="5"
            :disabled="disableSubmit"
            :replaceFields="{children:'children', title:'name', key:'id', value: 'id' }"
          />
        </a-form-model-item>
        <a-form-model-item label="非金额类问题整改类型" prop="nonAmountType">
          <a-tree-select
            :show-search="true"
            tree-node-filter-prop="title"
            v-model="model.nonAmountType"
            style="width: 100%"
            :tree-data="treeData2"
            tree-checkable
            :maxTagCount="5"
            :disabled="disableSubmit"
            :replaceFields="{children:'children', title:'name', key:'id', value: 'id' }"
          />
        </a-form-model-item>
        <a-form-model-item label="追责处理" prop="responsibility">
          <a-tree-select
            :show-search="true"
            tree-node-filter-prop="title"
            v-model="model.responsibility"
            style="width: 100%"
            :tree-data="treeData3"
            tree-checkable
            :maxTagCount="5"
            :disabled="disableSubmit"
            :replaceFields="{children:'children', title:'name', key:'id', value: 'id' }"
          />
        </a-form-model-item>
        <a-form-model-item label="人次" prop="person">
          <a-input-number style="width: 100%" v-model="model.person" :disabled="disableSubmit"/>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- table区域-end -->
  </j-modal>
</template>
<script>
  import {httpAction, getAction} from '@/api/manage'

  export default {
    name: 'SysPositionModal',
    props: ['id'],
    components: {},
    data() {
      return {
        labelCol: {span: 7},
        wrapperCol: {span: 15},
        disableSubmit: false,
        title: '机构信息',
        visible: false,
        isCheck: false,
        model: {},
        treeData1: [],
        treeData2: [],
        treeData3: [],
        url: {
          get: "/sjxmzygl/sjWorkZtfaProblem/queryById",
          edit: "/sjxmzygl/sjWorkZtfaProblem/edit",
          tree: "/sjxmzygl/sjWorkBaogaoZg/queryRectifyTree",
        },
        rules: {}
      }
    },
    created() {
      this.loadTree1()
      this.loadTree2()
      this.loadTree3()

    },
    watch: {},
    methods: {
      loadTree1() {
        this.treeData1 = []
        getAction(this.url.tree, {type: 1}).then((res) => {
          if (res.success) {
            this.treeData1 = res.result
          }
        })
      },
      loadTree2() {
        this.treeData2 = []
        getAction(this.url.tree, {type: 2}).then((res) => {
          if (res.success) {
            this.treeData2 = res.result
          }
        })
      },
      loadTree3() {
        this.treeData3 = []
        getAction(this.url.tree, {type: 3}).then((res) => {
          if (res.success) {
            this.treeData3 = res.result
          }
        })
      },
      getInfo() {
        getAction(this.url.get, {id: this.model.id}).then((res) => {
          if (res.success) {
            this.model = res.result
            if (this.model.amountType) {
              this.model.amountType = this.model.amountType.split(',');
            } else {
              this.model.amountType = []
            }
            if (this.model.nonAmountType) {
              this.model.nonAmountType = this.model.nonAmountType.split(',');
            } else {
              this.model.nonAmountType = []
            }
            if (this.model.responsibility) {
              this.model.responsibility = this.model.responsibility.split(',');
            } else {
              this.model.responsibility = []
            }
          }
        })
      },
      check(record) {
        this.model = Object.assign({}, record)
        this.getInfo()
        this.visible = true
      },
      edit(record) {
        this.model = Object.assign({}, record)
        this.getInfo()
        this.visible = true
      },
      close(isSubmit) {
        if (isSubmit) {
          this.saveData()
        } else {
          this.visible = false
        }
      },
      saveData() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.model.amountType = this.model.amountType.toString();
            this.model.nonAmountType = this.model.nonAmountType.toString();
            this.model.responsibility = this.model.responsibility.toString();
            httpAction(this.url.edit, {...this.model}, 'put').then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
                this.visible = false
              } else {
                this.$message.error(res.message);
              }
            })
          }
        })
      }
    },
  }
</script>

<style lang="less" scoped>

  .name-type {
    width: 110px;
    margin-left: 5px;
    border: 1px solid #e0e0e0;

    /deep/ .ant-select-selection {
      box-sizing: border-box;
      min-height: 27px !important;

      .ant-select-selection__rendered {
        line-height: 27px !important;
      }
    }
  }
</style>
